<template>
  <view class="shadow">
    <view class="content">
      <image
        :src="
          houseInfo?.house_img !== null
            ? base64ToBlobUrl(houseInfo?.house_img as string)
            : 'https://img95.699pic.com/photo/50149/6896.jpg_wh860.jpg'
        "
        class="head-img"
      />
      <view class="desc">{{ houseInfo?.house_desc }}</view>
      <view class="price">￥{{ houseInfo?.price }}</view>
    </view>
  </view>
  <view class="rich-txt">
    <up-parse :content="houseInfo?.descTxt"></up-parse>
  </view>
  <view class="bot-btn">
    <view class="contact" @click="call">联系房东</view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { HouseList } from '@/types/homePage'
import { houseInfoI } from '@/api/home'
import { base64ToBlobUrl } from '@/common/img'

const houseInfo = ref<HouseList>()

const call = () => {
  // 拨打电话
  uni.makePhoneCall({
    phoneNumber: houseInfo.value?.telephone as string
  })
}

onLoad(async (options: any) => {
  console.log('onLoad options', options)
  const res = await houseInfoI(options.id)
  houseInfo.value = res.data
})
</script>

<style lang="scss" scoped>
.shadow {
  width: 100%;
  // 设置边框阴影
  box-shadow: 3rpx 3rpx 8rpx #eee;
  .content {
    width: 95%;
    margin: 0 auto;
    height: auto;
    padding: 10rpx;
    .head-img {
      width: 100%;
      border-radius: 15rpx;
    }
    .desc {
      padding: 5rpx;
      font-size: 32rpx;
    }
    .price {
      font-size: 38rpx;
      color: #fda261;
    }
  }
}
.rich-txt {
  width: 95%;
  height: auto;
  margin: 0 auto;
  padding-bottom: 110rpx;
}
.contact {
  width: 98%;
  height: 100rpx;
  border-radius: 15rpx;
  background-color: #fda261;
  color: #fff;
  text-align: center;
  font-size: 34rpx;
  line-height: 100rpx;
  position: fixed;
  bottom: 0;
}
.bot-btn {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
}
</style>
